<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>事件处理</title>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{{school}}学习</h2>
        <!-- 标准写法 -->
        <button v-on:click='show1'>点我（v-on标准写法）</button> <br><br>
        <!-- 简写写法 -->
        <button @click='show1'>点我（@简写写法）</button> <br><br>
        <!-- 传递参数 -->
        <button @click='show2($event,666)'>点我（@简写写法）</button> <br><br>
        <!-- 绑定事件---阻止默认行为，prevent叫做事件修饰符 -->
        <a href="https://www.baidu.com" @click.prevent='show3'>绑定事件---阻止默认行为</a> <br> <br>
         <!-- 绑定事件---阻止冒泡，stop叫做事件修饰符,事件修饰符可以连着写 -->
         <div @click='show4'>
             <a @click.stop.prevent='show4' href="https://www.baidu.com">绑定事件---阻止冒泡</a>
         </div>
         <br>
         <!-- 键盘事件 -->
         <!-- <input @keyup.enter='show5' type="text" placeholder="输入后按下回车提示数据"> -->
         <input @keyup='show5' type="text" placeholder="输入后按下回车提示数据">
    </div>


    <script>
        new Vue({
            el:'#root',
            data:{//数据需要监视，因为会经常变
                school:'iwat'
            },
            methods:{//用于配置方法
                show1(event){
                    alert("信息1");
                    //this就是vm，event是事件对象
                    console.log(this.school,this);
                    console.log(event.target.innerText);
                },
                show2(event,number){
                    alert("信息2");
                },
                show3(event){
                    alert("信息3");
                },
                show4(event){
                    alert("信息4");
                },
                show5(event){
                    // alert("信息5");
                    console.log(event.target.value);
                    console.log(event.key);//打印keyName
                    console.log(event.keyCode);//打印keyCode
                },
            }
        });
    </script>
</body>
</html>